<template>
	<view class="">
		<view class="fix-box" v-show='!isTx'>
			<image class="login-img" :src="loginImg" mode="widthFix"></image>
			<view class='tl_btn' @click="getL"> <image :src="wxIcon" style="width: 20px;height: 20px;margin-right: 10px;" mode=""></image> 微信一键登陆</view>
			<view class="bottom-btn-box-left-xieyi">
				<checkbox-group @change="changeXiyi">
					<checkbox class="checkboxTip" :checked="checkboxXy" />
				</checkbox-group>
				<view class="bottom-btn-xieyi">阅读并同意 <text class="">《上门回收服务协议》</text></view>
			</view>
		</view>
		<view class="fix-box-phone" v-show="isTx">
			<!-- <view class="phone-login-box"> -->
				<image class="login-img" :src="loginImg" mode="widthFix"></image>
			<!-- </view> -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class='tl_btn' size="default"
				data-id='0' >微信手机号登录</button>
		</view>
		
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				checkboxXy:false,
				isTx:uni.getStorageSync('userAvatarUrl'),
				wxIcon:baseUrl+'/uploads/static/image/recovery_login_icon_wechat@2x.png',
				loginImg:baseUrl+'/uploads/static/image/recovery_login_img@2x.png',
			}
		},
		methods:{
			getL(){
				let _this = this
				if(!this.checkboxXy){
					uni.showToast({
						title:'请阅读并同意《上门回收服务协议》',
						icon:'none'
					})
					return false
				}
				uni.getUserProfile({
					desc:'展示头像及姓名',
					success:function(res){
						console.log(res)
						uni.setStorageSync('userAvatarUrl',res.userInfo.avatarUrl)
						uni.setStorageSync('UserNickName',res.userInfo.nickName)
						_this.isTx = true
					}
				})
			},
			//获取手机号授权
			getPhoneNumber(e) {
				console.log(e);
				
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//获取code
					http.getUserMobile({
						// encryptedData: e.detail.encryptedData,
						// iv: e.detail.iv,
						avatarUrl:uni.getStorageSync('userAvatarUrl'),
						nickName:uni.getStorageSync('UserNickName'),
						code: e.detail.code,
					}).then((res)=>{
						// console.log(res)
						if(res.data.code == 1){
							var data = res.data.data
							uni.setStorageSync('X-Auth-Token',data['X-Auth-Token'])
							uni.navigateBack({
								delta: 1
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					})
				} else {
					//拒绝
					console.log('拒绝')
				}
			},
			changeXiyi(e){
				this.checkboxXy = e.detail.value.length > 0 ? true : false
			}
		}
	}
</script>

<style>
	.tl_btn {
		width: 80% !important;
		height: 50px;
		background-color: #00CB8B;
		color: #fff;
		margin: 20px auto;
		text-align: center;
		display: flex;flex-direction: row;
		align-items: center;
		justify-content: center;
		line-height: 50px;
		border-radius: 10px;
	}
	.fix-box{
		position: fixed;
		width: 100%;
		height: 100vh;
		background: #F8F9FD;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.fix-box-phone{
		position: fixed;
		width: 100%;
		height: 100vh;
		background:  #F8F9FD;
		top: 0;
		left: 0;
		z-index: 11;
	}
	.login-img{
		width: 285px;
		display: block;
		margin: 0 auto;
		margin-top: 95px;
	}
	.phone-login-box{
		margin: 0 auto;
		margin-top: 95px;
		width: 285px;
		background: #fff;
		border-radius: 10px;
	}
	.bottom-btn-box-left-xieyi{display: flex;flex-direction: row;position: fixed;bottom:0;left: 0;justify-content: center;width: 100%;height: calc(90px + env(safe-area-inset-bottom) /2);align-items: center;}
	.checkboxTip{transform:scale(0.8)}
	.bottom-btn-xieyi{font-size: 12px;}
	.bottom-btn-xieyi text{color: #00CB8B;}
</style>